<template>
	<view class="my-record">
		<van-cell-group>
			<van-field center clearable label="手机号码" placeholder="请输入手机号码" use-button-slot type="number"
				:disabled="verifyFlag" :value="phone" @change="onInputPhone">
			</van-field>
			<van-field center clearable label="验证码" placeholder="请输入验证码" use-button-slot @change="codeChange"
				:disabled="!verifyFlag">
				<van-button @click="getCode" slot="button" size="small" type="info" :disable="!!timeInt">
					{{verifyText}}
				</van-button>
			</van-field>
			<view style="padding: 32rpx; box-sizing: border-box;">
				<van-button round type="info" block :disabled="!verifyFlag" @click="onGetProjectAcceptList">
					查询
				</van-button>
			</view>
		</van-cell-group>
		<view class="form-list">
			<view class="form-item" v-for="(item,index) in myAcceptanceList" :key="item.id">
				<view class="form-item-info">
					<view class="info-item">
						<view class="info-label">
							申请日期：
						</view>
						<view class="info-value">
							{{ item.createTime.substring(0,10).replaceAll('-','/') }}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							工程名称：
						</view>
						<view class="info-value">
							{{item.proName}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							工程地点：
						</view>
						<view class="info-value">
							{{item.address}}
						</view>
					</view>
					<view class="info-item">
						<view class="info-label">
							验收进度：
						</view>
						<view class="info-value">
							{{item.state}}
						</view>
					</view>
				</view>
				<view class="form-item-footer">
					<van-button style="margin-right: 20rpx;" color="#7C96F3" plain round size="small"
						v-if="item.state == '等待审核'" @click="toAcceptancePage(item.id,'true')">
						修改
					</van-button>
					<van-button color="#7C96F3" plain round size="small" @click="toAcceptancePage(item.id,'false')">
						查看
					</van-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		sendValidCode,
		getProjectAcceptList
	} from '@/request/api.js'

	export default {
		data() {
			return {
				phone: '',
				verifyFlag: false,
				verifyText: '获取验证码',
				verifyOriCode: '',
				verifyCode: '',
				timeInt: null,

				myAcceptanceList: [],
			}
		},

		onShow() {
			if (this.phone) {
				this.onGetProjectAcceptList()
			}
		},

		onHide(e) {
			if (this.timeInt) {
				clearInterval(this.timeInt)
				this.verifyText = "获取验证码"
			}
		},

		methods: {
			onInputPhone(e) {
				this.phone = e.detail
			},

			codeChange(e) {
				this.verifyCode = e.detail
			},

			getCode() {
				if (!this.phone) {
					uni.showToast({
						icon: 'none',
						title: '请输入手机号码'
					})
					return
				}


				if (this.timeInt) {
					return
				} else {
					sendValidCode(this.phone).then(res => {
						if (res.code == 1) {
							this.verifyOriCode = res.result
							this.verifyFlag = true
							this.setTimeInterval()
						}
					})
				}
			},

			setTimeInterval() {
				if (this.timeInt) {
					return
				} else {
					let time = 30
					this.verifyText = `${time}S 后重新发送`
					this.timeInt = setInterval(() => {
						if (time <= 0) {
							clearInterval(this.timeInt)
							this.timeInt = null
							this.verifyText = `重新发送`
						} else {
							time--
							this.verifyText = `${time}S 后重新发送`
						}
					}, 1000)
				}
			},

			onGetProjectAcceptList() {
				if (!this.verifyCode || this.verifyCode != this.verifyOriCode) {
					uni.showToast({
						icon: 'none',
						title: '短信验证码错误'
					})
					return false
				}

				this.myAcceptanceList = [];
				getProjectAcceptList(this.phone).then(res => {
					this.myAcceptanceList = res.result
					// res.result.forEach((element, index) => {
					// 	var aData = new Date(Date.parse(element.createTime))
					// 	var month = aData.getMonth() < 9 ? "0" + (aData.getMonth() + 1) : aData
					// 	.getMonth() + 1;
					// 	var date = aData.getDate() <= 9 ? "0" + aData.getDate() : aData.getDate();
					// 	element.createTime = aData.getFullYear() + "/" + month + "/" + date;
					// 	this.myAcceptanceList.push(element)
					// })
				})
			},

			toAcceptancePage(id, edit) {
				uni.navigateTo({
					url: `../xxgc/acceptance?id=${id}&edit=${edit}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-record {
		background-color: #F8F8F8;
		height: 100vh;

		.form-list {
			padding: 25rpx;

			.form-item {
				// width: 700px;
				background: #FFFFFF;
				opacity: 1;
				border-radius: 20px;
				margin-bottom: 40rpx;

				.form-item-info {
					padding: 32rpx 36rpx;

					.info-item {
						font-size: 28rpx;
						display: flex;
						margin-bottom: 24rpx;

						.info-label {
							color: #7C7C7C;
							white-space: nowrap;
						}

						.info-value {
							color: #000000;
						}
					}

					.info-item:last-child {
						margin-bottom: 0rpx;
					}
				}

				.form-item-footer {
					border-top: 1px solid #E0E0E0;
					padding: 16rpx 30rpx;
					display: flex;
					justify-content: flex-end;
					color: #7C96F3;
				}
			}
		}
	}
</style>
